<template>
	<!-- 个人的主页面 --> <!-- 静态样式 -->
	<view class="userLayout pageBg" v-if="userinfo">
		<view :style="{height:getNavBarHeight()+'px'}"></view>
		<view class="userInfo">
			<view class="avatar">
				<image src="/static/images/User2-2.png" model="aspectFill"></image>
			</view>
			<view class="ip">{{ userinfo.IP || '100.100.100.100' }}</view>
			<view class="address">
				来自于：{{ userinfo.address.city || userinfo.address.province || userinfo.address.country|| '未知' }}
			</view>

			<view class="section">
				<view class="list">
					<view class="row" @click="navigateTo('/pages/calsslist/calsslist?name=我的下载&type=download')">
						<view class="left">
							<uni-icons type="download-filled" size="20"></uni-icons>
							<view class="text">我的下载</view>
						</view>
						<view class="right">
							<view class="text">{{userinfo.downloadSize}}</view>
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>

					<view class="row" @click="navigateTo('/pages/calsslist/calsslist?name=我的评分&type=score')">
						<view class="left">
							<uni-icons type="star-filled" size="20"></uni-icons>
							<view class="text">我的评分</view>
						</view>
						<view class="right">
							<view class="text">{{userinfo.scoreSize}}</view>
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>
					<view class="row">
						<view class="left">
							<uni-icons type="chatboxes-filled" size="20"></uni-icons>
							<view class="text">联系客服</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
						<!-- 在小程序的时候出现的是联系客服 -->
						<!-- #ifdef MP -->
						<button open-type="contact" class="buts">联系客服</button>
						<!-- #endif -->
						<!-- 在网页的时候出现的是拨打电话跟给出号码 -->
						<!-- #ifndef MP -->
						<button @click="cllNumber" class="buts">拨打电话</button>
						<!-- #endif -->
					</view>
				</view>
			</view>

			<view class="section">
				<view class="list">
					<view class="row" @click="navigateTo('/pages/notice/affiche/affiche')">
						<view class="left">
							<uni-icons type="notification-filled" size="20"></uni-icons>
							<view class="text" style="color: #666;">订阅更新</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="row" @click="navigateTo('/pages/notice/faq/faq')">
						<view class="left">
							<uni-icons type="flag-filled" size="20"></uni-icons>
							<view class="text" style="color: #666;">常见问题</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="15" color="#aaa"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="loadingLayout" v-else>
		<view :style="{height:getNavBarHeight()+'px'}"></view>
		<uni-load-more status="loading"></uni-load-more>
	</view>
</template>

<script lang="ts" setup>
	import { getNavBarHeight } from "@/utils/system.js"
	import { apiUserInfo } from "@/api/apis.js"
	import { ref } from "vue";
	const userinfo = ref({
		address: {
			city: '',
			province: '',
			country: ''
		}
	});

	/* 点击拨打电话的时候,给出电话号码,根据Hbuilderx官网给的api组件写的 */
	const cllNumber = () => {
		uni.makePhoneCall({
			phoneNumber: "15260406089"
		})

	}
	//接收跳转的地址进行跳转操作
	const navigateTo = (url: string) => {
		uni.navigateTo({
			url
		});
	};
	//定义暴露出去
	defineExpose({
		navigateTo
	});


	//多写一个测试推送
	//拿一下用户信息，ip地址，所在地方
	const getUserInfo = () => {
		apiUserInfo().then(res => {
			console.log("用户信息:", res);
			console.log("测试推送效果~~~~~~！！！！")
			userinfo.value = res.data || {}; // 确保赋值时对象不为空
		});

	}

	getUserInfo();
</script>

<style lang="scss" scoped>
	:deep() {
		a {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.userLayout {
		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			flex-direction: column;
			/* 图片间隔,上下50 左右0 */
			padding: 50rpx 0;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%; //圆
				overflow: hidden; //图像隐藏

				image {
					width: 100%;
					height: 100%;

				}
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}

			.section {
				width: 690rpx;
				margin: 50rpx auto;
				border: 1px solid #eee;
				box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

				.list {
					.row {
						//里面有分左右，所以要用布局去做
						display: flex;
						justify-content: space-between; //两遍对齐
						align-items: center;
						padding: 0 30rpx;
						height: 100rpx;
						border-bottom: 1px solid #eee;
						background: #fff;
						position: relative; //相对定位

						&:last-child {
							border-bottom: 0
						}

						.left {
							display: flex;
							align-items: center;

							/* 样式穿透 */
							:deep() {
								.uni-icons {
									/*  !important这个就是把他设为最高优先级去渲染 */
									color: $brand-theme-color !important;

								}

							}

							.text {
								padding-left: 20rpx;
								color: #666;
							}
						}

						.right {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							color: #aaa;

							.text {
								padding-left: 20rpx;
								color: #666;
							}

						}

						.buts {
							position: absolute;
							top: 0;
							left: 0;
							height: 100%;
							width: 100%;
							opacity: 0;
							/* 透明度为0 */
						}



					}

				}
			}

		}

	}
</style>